
import {
    Divider,
    Tag,
    ColorPicker,
    Select,
    InputNumber,
} from 'antd'

import { OptionsNavMapping, FontFamilyMapping, FontWeightMapping, FontStyleMapping } from '../Config/theme'
import { themeStore } from '../Config/zustand'


const SetSystemOPTIONS = () => {

    const { head, updateHead } = themeStore()

    const { optionsList } = head
    const { backSize, backColor, backRadio, backIndex, backShadowX, backShadowY, backShadowS, backShadowB } = head
    const { iconSize, iconColor, iconShadowX, iconShadowY, iconShadowS, iconShadowB } = head
    const { toolBack, toolColor, toolFamily, toolWeight, toolStyle, toolSize, toolShadowX, toolShadowY, toolShadowS, toolShadowB } = head






    const tagChange = (value, state) => {
        const nextSelectedTags = state ? [...optionsList, value] : optionsList.filter((t) => t !== value)
        head.optionsList = nextSelectedTags
        updateHead(head)
    }

    const HeadFunc = (key, value) => {
        head[key] = value
        updateHead(head)
    }

    return (
        <div className='SetSystemOPTIONS'>
            <Divider orientation="left" >操作设置</Divider>
            <div className='title'>操作栏设置</div>
            <div className='OptionsList'>
                {OptionsNavMapping.map(({ value, label, icon }) =>
                    <Tag.CheckableTag key={value} checked={optionsList.includes(value)} onChange={e => tagChange(value, e)} >
                        {icon} {label}
                    </Tag.CheckableTag>
                )}
            </div>
            <div className='setUp'>
                <div>
                    <div className='title'>背景设置</div>
                    <div className='Label'>
                        <div>背景颜色</div>
                        <ColorPicker value={backColor} onChangeComplete={e => HeadFunc('backColor', e.toHexString())} />
                    </div>
                    <div className='Label' >
                        <div>背景尺寸</div>
                        <InputNumber value={backSize} onChange={e => HeadFunc('backSize', e)} />
                    </div>
                    <div className='Label' >
                        <div>背景圆角</div>
                        <InputNumber value={backRadio} onChange={e => HeadFunc('backRadio', e)} />
                    </div>
                    <div className='Label' >
                        <div>背景间距</div>
                        <InputNumber value={backIndex} onChange={e => HeadFunc('backIndex', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影X轴</div>
                        <InputNumber value={backShadowX} onChange={e => HeadFunc('backShadowX', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影Y轴</div>
                        <InputNumber value={backShadowY} onChange={e => HeadFunc('backShadowY', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影尺寸</div>
                        <InputNumber value={backShadowS} onChange={e => HeadFunc('backShadowS', e)} />
                    </div>
                    <div className='Label'>
                        <div>阴影颜色</div>
                        <ColorPicker value={backShadowB} onChangeComplete={e => HeadFunc('backShadowB', e.toHexString())} />
                    </div>
                </div>
                <div>
                    <div className='title'>图标设置</div>
                    <div className='Label'>
                        <div>图标颜色</div>
                        <ColorPicker value={iconColor} onChangeComplete={e => HeadFunc('iconColor', e.toHexString())} />
                    </div>
                    <div className='Label' >
                        <div>图标尺寸</div>
                        <InputNumber value={iconSize} onChange={e => HeadFunc('iconSize', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影X轴</div>
                        <InputNumber value={iconShadowX} onChange={e => HeadFunc('iconShadowX', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影Y轴</div>
                        <InputNumber value={iconShadowY} onChange={e => HeadFunc('iconShadowY', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影尺寸</div>
                        <InputNumber value={iconShadowS} onChange={e => HeadFunc('iconShadowS', e)} />
                    </div>
                    <div className='Label'>
                        <div>阴影颜色</div>
                        <ColorPicker value={iconShadowB} onChangeComplete={e => HeadFunc('iconShadowB', e.toHexString())} />
                    </div>
                </div>
                <div>
                    <div className='title'>提示框</div>
                    <div className='Label'>
                        <div>背景颜色</div>
                        <ColorPicker value={toolBack} onChangeComplete={e => HeadFunc('toolBack', e.toHexString())} />
                    </div>
                    <div className='Label'>
                        <div>文字颜色</div>
                        <ColorPicker value={toolColor} onChangeComplete={e => HeadFunc('toolColor', e.toHexString())} />
                    </div>
                    <div className='Label'>
                        <div>文字字体</div>
                        <Select value={toolFamily} options={FontFamilyMapping} onChange={e => HeadFunc('toolFamily', e)} />
                    </div>
                    <div className='Label'>
                        <div>文字加粗</div>
                        <Select value={toolWeight} options={FontWeightMapping} onChange={e => HeadFunc('toolWeight', e)} />
                    </div>
                    <div className='Label'>
                        <div>文字倾斜</div>
                        <Select value={toolStyle} options={FontStyleMapping} onChange={e => HeadFunc('toolStyle', e)} />
                    </div>
                    <div className='Label' >
                        <div>文字字号</div>
                        <InputNumber value={toolSize} onChange={e => HeadFunc('toolSize', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影X轴</div>
                        <InputNumber value={toolShadowX} onChange={e => HeadFunc('toolShadowX', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影Y轴</div>
                        <InputNumber value={toolShadowY} onChange={e => HeadFunc('toolShadowY', e)} />
                    </div>
                    <div className='Label' >
                        <div>阴影尺寸</div>
                        <InputNumber value={toolShadowS} onChange={e => HeadFunc('toolShadowS', e)} />
                    </div>
                    <div className='Label'>
                        <div>阴影颜色</div>
                        <ColorPicker value={toolShadowB} onChangeComplete={e => HeadFunc('toolShadowB', e.toHexString())} />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default SetSystemOPTIONS;